<template>
	<view>
		<view class="tui-order-item">
			<block >
				<tui-list-cell padding="0" class="item-list-cell" >
					<view class="left">
						<view class="tui-goods-item">
							<image :src="data.orderItemList[index].productPic" class="tui-goods-img"></image>
							<view class="tui-goods-center">
								<view class="tui-goods-name">{{data.orderItemList[index].productName}}</view>
								<view class="tui-goods-attr"><text v-for="(item,i) in data.orderItemList[index].productAttrArray" :key="i">{{item.value}}{{i<(data.orderItemList[index].productAttrArray.length-1)?',':''}}</text></view>
							</view>
							<view class="tui-price-right">
								<view>￥{{data.orderItemList[index].realAmount}}</view>
								<view>x{{data.orderItemList[index].productQuantity}}</view>
							</view>
						</view>
					</view>
				</tui-list-cell>

			</block>
		</view>
		<view style="padding: 20rpx; display: flex; align-items: center;">
			<text>退货原因:</text>
			<u-input style="width: 80%;margin-left: 10rpx;" :border="border" type="select" :select-open="actionSheetShow" v-model="reason" placeholder="退货原因" @click="actionSheetShow = true">
				
			</u-input>
			</view>
		<textarea class="text" placeholder="请输入退款描述" maxlength="500" v-model="textarea"></textarea>
		<view>
			<tui-list-cell :hover="false" :lineLeft="false">
				<view class="tui-goods-title">
					上传图片({{fileList.length}}/9)
				</view>
			</tui-list-cell>
			<u-upload ref="uUpload" :max-count="9" :action="action" name="file" :before-upload="beforeUpload" :form-data="fromData" @on-success="onSuccess"
			 @on-remove="onRemove"></u-upload>
		</view>
		<view class="tui-addr-save">
			<tui-button shadow type="danger" height="88rpx" shape="circle" @click="submit()">提交</tui-button>
		</view>

		
		<tui-toast ref="toast"></tui-toast>
		
		<u-action-sheet :list="actionSheetList" v-model="actionSheetShow" @click="actionSheetCallback"></u-action-sheet>
		
		<u-no-network tips="哎呀，网络信号丢失"></u-no-network>
		<failTimeout v-show="failTimeout"></failTimeout>
	</view>
</template>

<script>
	import OmsPortalOrderController from '../../api/OmsPortalOrderController.js'
	import OmsPortalOrderReturnApplyController from '../../api/OmsPortalOrderReturnApplyController.js'
	import http from '../../utils/http.js'
	export default {
		data() {
			return {
				failTimeout:false,
				orderId: null,
				data: {},
				action: null,
				fileList: [],
				fromData: {},
				img: '',
				show: false,
				index:0,
				textarea:'',
				value:5,
				
				border: false,
				actionSheetShow: false,
				reason:'',
				actionSheetList: [],
				actionSheetShow: false,
				productId:null,
			}
		},
		onLoad(o) {
			this.orderId = o.orderId
			this.productId=o.productId
			if (this.orderId == null || this.orderId == '' || this.orderId == 'undefined') {
				uni.navigateBack()
			}
		},
		async onShow() {
			this.fileList=[]
			await OmsPortalOrderController.detail(this.orderId).then(res => {
				if (res.data.code == 200) {
					let index=0;
					res.data.data.orderItemList.forEach(e=>{
						if(e.productId==this.productId){
							this.index=index;
						}
						e.productAttrArray=JSON.parse(e.productAttr)
						index++;
					})
					this.data = res.data.data
				}
			}).catch(err => {
				if(err.errMsg=='request:fail timeout'){
					this.failTimeout=true
				}
			})

			OmsPortalOrderReturnApplyController.reasonList().then(res=>{
				if(res.data.code==200){
					res.data.data.map(e=>{
						e.text=e.name
						this.actionSheetList.push(e)
					})
				}
			}).catch(err=>{
				if(err.errMsg=='request:fail timeout'){
					this.failTimeout=true
				}
			})
			http.policy().then(res => {
				if (res.data.code == 200) {
					this.action=res.data.data.host;
				}
			})
		},
		methods: {
			beforeUpload(index, list) {
				// 返回一个promise
				let files = this.$refs.uUpload.lists.filter(val => {
					return val.progress != 100;
				})
				let url = files[0].url.split('/');
				let imgs = url[url.length - 1].split('.');
				let jpg = imgs[imgs.length - 1];
				let img = "/" + new Date().getTime() + '.' + jpg;
				return new Promise((resolve, reject) => {
					http.policy().then(res => {

						if (res.data.code == 200) {
							let data = {};
							data.policy = res.data.data.policy;
							data.signature = res.data.data.signature;
							data.ossaccessKeyId = res.data.data.accessKeyId;
							data.key = res.data.data.dir + img;
							data.dir = res.data.data.dir;
							data.host = res.data.data.host;
							this.action=res.data.data.host;
							this.fromData = data
							this.img = res.data.data.host + '/' + res.data.data.dir + img
							resolve();
						}
					}).catch(err => {
						// reject()之后，将会进入promise的组件内部的catch回调，相当于返回false
						reject();
					})
				})
			},
			onSuccess(data, index, lists, name) {
				lists[index].url = this.img
				this.fileList = lists;
			},
			onRemove(index, lists, name) {
				this.fileList = lists;
			},
			clickIndexF(index){	//下标
				this.show=false
				this.index=index	
			},
			clickIndexT(){	//下标
				this.show=true
			},
			submit() {
				let strUrl=[];
				if(this.fileList!=null){
					this.fileList.map(e=>{
						strUrl.push(e.url)
					})
				}
				if(this.textarea==null||this.textarea==''){
					this.$refs.toast.show({
						title: "请输入评价",
						icon: false
					})
					return;
				}
				if(this.reason==null||this.reason==''){
					this.$refs.toast.show({
						title: "请选择退货原因",
						icon: false
					})
					return;
				}
				OmsPortalOrderReturnApplyController.create(
					this.textarea,
					null,
					this.data.id,
					this.data.orderSn,
					this.data.orderItemList[this.index].productAttr,
					this.data.orderItemList[this.index].productBrand,
					this.data.orderItemList[this.index].productQuantity,
					this.data.orderItemList[this.index].productId,
					this.data.orderItemList[this.index].productName,
					this.data.orderItemList[this.index].productPic,
					this.data.orderItemList[this.index].productPrice,
					this.data.orderItemList[this.index].realAmount,
					strUrl.toString(),
					this.reason,
					this.data.receiverName,
					this.data.receiverPhone
				).then(res=>{
					if(res.data.code==200){
						this.$refs.toast.show({
							title: "退货申请成功",
							imgUrl: "/static/img/toast/check-circle.png",
							icon: true
						})
						
						var pages = getCurrentPages(); // 当前页面
						
						var beforePage = pages[pages.length - 2]; // 前一个页面
						
						beforePage.onShow()
						
						setTimeout(()=>{
							uni.navigateBack()
						},2000)
					}
				}).catch(err=>{
					if(err.errMsg=='request:fail timeout'){
						this.failTimeout=true
					}
				})
			},
			// 点击actionSheet回调
			actionSheetCallback(index) {
				uni.hideKeyboard();
				this.reason = this.actionSheetList[index].text;
			},
		}
	}
</script>

<style scoped>
	.score{
		padding: 30rpx;
	}
	.text {
		width: 100%;
		height: 200rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.tui-addr-save {
		margin-top: 30rpx;
	}

	.tui-order-item {
		margin-top: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.tui-order-item .left {
		width: 100%;
	}

	.tui-order-item .right {
		margin-right: 20rpx;
	}

	>>>.tui-list-cell {
		display: flex;
		justify-content: space-between;
		align-items: auto;
	}

	.tui-goods-title {
		width: 100%;
		font-size: 28rpx;
		line-height: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}


	.tui-goods-item {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.tui-goods-img {
		width: 180rpx;
		height: 180rpx;
		display: block;
		flex-shrink: 0;
	}

	.tui-goods-center {
		flex: 1;
		padding: 20rpx 8rpx;
		box-sizing: border-box;
	}

	.tui-goods-name {
		max-width: 310rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 26rpx;
		line-height: 32rpx;
	}

	.tui-goods-attr {
		font-size: 22rpx;
		color: #888888;
		line-height: 32rpx;
		padding-top: 20rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-price-right {
		text-align: right;
		font-size: 24rpx;
		color: #888888;
		line-height: 30rpx;
		padding-top: 20rpx;
	}

	.tui-color-red {
		color: #E41F19;
		padding-right: 30rpx;
	}

	.tui-goods-price {
		width: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		font-size: 24rpx;
	}

	.tui-size-24 {
		font-size: 24rpx;
		line-height: 24rpx;
	}

	.tui-price-large {
		font-size: 32rpx;
		line-height: 30rpx;
	}
</style>
<style scoped>
	.tui-pay-item__title {
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.tui-pay-amuont {
		color: #eb0909;
		font-weight: 500;
		font-size: 34rpx;
	}

	.tui-pay-item {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.tui-pay-logo {
		width: 48rpx;
		height: 48rpx;
		margin-right: 15rpx;
	}

	.tui-radio {
		margin-left: auto;
		transform: scale(0.8);
		transform-origin: 100% center;
	}

	.tui-btn-pay {
		width: 100%;
		padding: 68rpx 35rpx 50rpx 35rpx;
		box-sizing: border-box;
	}

	.tui-recharge {
		color: #fc872d;
		margin-left: auto;
		padding: 12rpx 0;
	}
</style>
